<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-11-17 11:40:09
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:27:32
 * @FilePath: \blog\src\views\admin\system\role\components\AddDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog custom-class="dialogClass" v-model="props.addDialog" :title="props.title">
    <amForm ref="baseForm" :form-item="formItem" :form-data="formData">
    </amForm>
    <div style="width: 100%; border: 1px solid #f0f2f5"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="clostBtn">取消</el-button>
        <el-button type="primary" @click="
          props.title == '新增'
            ? submitForm(baseForm.formRef)
            : modifyForm(baseForm.formRef)
        ">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, ElTree } from "element-plus";
import { reactive, ref } from "vue";
import {addDialog} from "./option";
import ClassServiceApi from "../api/classifyServiceApi";
const classServiceApi = new ClassServiceApi();

const formItem = addDialog.formItem;
const formLabelWidth = "140px";
const baseForm = ref<HTMLElement | any>();

interface Props {
  addDialog: boolean;
  title: string;
  id: string;
  formData: any;
}

const props = withDefaults(defineProps<Props>(), {
  userDialog: false,
  title: "",
  id: "",
});

const emit = defineEmits(["saveBtn", "clostBtn"]);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = await classServiceApi.addFirstClass(props.formData);
      if (data.code == 200) {
        ElMessage.success("新增成功！");
      }
      emit("saveBtn");
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const modifyForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let params = {
        id: props.id,
        firstClassName:props.formData.firstClassName
      };
      const data = await classServiceApi.modifyFirstClass(params)
      if (data.code == 200) {
        ElMessage.success("编辑成功！");
      }
      emit("saveBtn");
      console.log('执行晚saveBtn----' + JSON.stringify(props.formData))
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const clostBtn = () => {
  emit("clostBtn");
  baseForm.value.formRef.resetFields();
};

</script>

<style lang="scss">
@import "@/assets/style/dialog.scss";
</style>

<style lang="scss">
.el-dialog__body {
  padding-left: 50px !important;
}
</style>
